<!--行程卡-->
<template>
   <div class="commemorate-box">
      <div class="checks">
       <div class="tree" >
          <el-scrollbar height="200px">
              <el-tree
                  ref="treeRef"
                  :data="cityData"
                  show-checkbox
                  :highlight-current="true"
                  node-key="label"
                  :props="defaultProps"
                  @check="handleCheck"
              />
          </el-scrollbar>
        </div>

        <el-button type="primary" @click="takephoto">保存本地</el-button>
        <br>
        <p>数据来源：<a target="_blank" href="http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2022/index.html">国家统计局</a></p>
      </div>
      <div ref="canvasRef" class="xck-view-box">
        <div class="xck-view-navbar">
          <div class="xck-view-navbar-left"></div>
          <div class="xck-view-navbar-text">行程卡纪念版</div>
          <div class="xck-view-navbar-right"></div>
        </div>
        <div class="xck-view">
          <div class="xck-view-title">
            <img
              src="https://mikutools.cdn.hatsune.tech/img/title.fd076ab.png"
              alt=""
            />
          </div>
          <div class="xck-view-subtitle">疫情防控，人人有责</div>
          <div class="xck-view-main">
            <img
              style="width: 20rem"
              src="https://mikutools.cdn.hatsune.tech/img/withtext@2x.c61c1bc.png"
              alt=""
              class="xck-view-head"
            />
            <div class="xck-view-time">2020***2023的动态行程卡</div>
            <div class="xck-view-endtime">停止于: 2022.12.13 00:00:00</div>
            <div class="xck-view-gif">
              <img
                style="width: 11rem"
                src="https://mikutools.cdn.hatsune.tech/img/gif_green.01a0e32.gif"
                alt=""
              />
            </div>
            <div class="xck-view-bottom">
              <span class="xck-view-bottom-date"
                >您于 2020 - 2023 年到达或旅经：</span>
              
              <span style="font-size:15px;color:#000;" v-for="(item,index) in data.passCity" :key="index">
               {{item}}
                </span>
            </div>
          </div>
          <div class="xck-view-info">
            12月13日0时起, 正式下线“通信行程卡”服务，“通信行程卡”
            短信、网页、微信小程序、支付宝小程序、APP等所有渠道同步下线!
          </div>
          <div class="xck-view-bye">
            <div class="xck-view-border"></div>
            <div style="font-size: 12px">三年了，望永不再见</div>
            <div class="xck-view-border"></div>
          </div>
        </div>
      </div>
   </div>
</template>

<script setup>
import cityData from '@/assets/data/city_data.json'
import html2canvas  from 'html2canvas'
import {reactive, ref, onMounted} from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const canvasRef = ref()
const treeRef = ref()
const data = reactive({
  arr:[],
  passCity:[],
  province:[
    '广东省','广西壮族自治区','北京市','上海市','天津市','重庆市','浙江省','江苏省','福建省','海南省','四川省','河北省','河南省','湖北省','湖南省','山东省','山西省','陕西省',
    '安徽省','云南省','贵州省','青海省','香港特别行政区','澳门特别行政区',
    '甘肃省','江西省','黑龙江省','辽宁省','吉林省','台湾省','内蒙古自治区','宁夏回族自治区','新疆维吾尔自治区','西藏自治区'],

 citys: [
   ['深圳市', '珠海市', '汕头市', '韶关市', '河源市', '梅州市', '汕尾市', '东莞市', '中山市', '江门市', '佛山市', '阳江市', '湛江市', '茂名市', '肇庆市', '清远市', '潮州市', '揭阳市', '云浮市', '惠州市'],
   ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'],
   ['东城区','西城区','朝阳区','丰台区','石景山区','海淀区','顺义区','通州区','大兴区','房山区','门头沟区','昌平区','平谷区','密云区','怀柔区','延庆区'],
  ['黄浦区','徐汇区','长宁区','静安区','普陀区','虹口区','杨浦区','闵行区','宝山区','嘉定区','浦东新区','金山区','松江区','青浦区','奉贤区','崇明区'],
  ['和平区','河西区','南开区','河东区','河北区','红桥区','东丽区','西青区','津南区','北辰区','滨海新区','蓟州区','静海区','宝坻区','宁河区','武清区'],
  ['重庆市辖区','县']
 ],
  });
const takephoto = ()=>{
  html2canvas(canvasRef.value,{backgroundColor:null,useCORS:true}).then((canvas)=>{
    let url =  canvas.toDataURL('image/png')
    let aLink = document.createElement('a')
    aLink.style.display = 'none'
    aLink.href = url;
    aLink.download = new Date().toLocaleString();
            // 创建一个点击事件并对 a 标签进行触发
    const event = new MouseEvent('click');
    aLink.dispatchEvent(event);
  })
}
onMounted(()=>{
  data.province.forEach((item,index)=> {

    data.arr.push({
      id:index,
      label:item,
      children: data.citys[index]?.map((item, index) => ({id:index, label:item}))
    })
  })
})
const defaultProps = {
  children: 'children',
  label: 'label',
}
const handleCheck = ()=>{
  const h = treeRef.value.getCheckedNodes(false,true)
  // .filter(item=>item.children === undefined)
  // console.log(h)
  let prevNodeLabel = '',arr = []
  for(let i = 0;i<h.length;i++){
    if(h[i].children !== undefined){
      prevNodeLabel = h[i].label
    }else{
      arr.push(prevNodeLabel + h[i].label)
    }
  }
  data.passCity = arr.join('，')
}
</script>

<style lang="less" scoped>
/deep/ .el-button{
  margin: 10px 0 0 0;
}
.tree{
  width:200px;
  height: 200px;
  border: 0.5px solid #ccc;
  border-radius: 5px;
}
.commemorate-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.checks {
  display: flex;
  flex-flow: column;
  margin: 0 10px 0 10px;
}
.xck-view-box {
  background: #2ba667;
  //border: 1px solid var(--border-color);
  //font-family: PingFangSC-Semibold;
  max-width: 350px;
  position: relative;
  border: 0.5px solid #ccc;
}
.xck-view-navbar {
  align-items: center;
  background-color: #fff;
  display: flex;
  height: 44px;
  justify-content: space-between;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
}
.xck-view-title {
  height: 45px;
  margin-bottom: 10px;
}
.xck-view-title img {
  height: 100%;
}
.xck-view-subtitle {
  color: #fff;
  font-size: 16px;
  font-weight: lighter;
  margin-bottom: 15px;
}
.xck-view-main {
  background-color: #fff;
  border-radius: 12px;
  text-align: center;
  width: 100%;
  .xck-view-bottom{
    border-top: 1px solid #e4e4e4;
    font-size: 15px;
    line-height: 1.5;
    margin: 20px 15px 0;
    padding: 12px 0;
    text-align: left;
  }
}
.xck-view-info {
  color: #fff;
  font-size: 12px;
  margin-top: 15px;
  line-height: 1.4;
  text-align: left;
}
.xck-view-bye {
  align-items: center;
  display: flex;
  justify-content: space-between;
  line-height: 1.5;
}
.xck-view {
  padding: 30px;
  text-align: center;
}
.xck-view-bottom-date {
  color: #94949e;
}
.xck-view-bye {
  align-items: center;
  display: flex;
  justify-content: space-between;
  line-height: 1.5;
  color: #fff;
  .xck-view-border {
    background-color: #fff;
    height: 1px;
    opacity: 0.8;
    width: 85px;
  }
}
</style>